<style scoped lang="scss">
	.container {
		padding-top: R(20);
	}

	.tetabHandlerminal-info-content {
		margin: 0 R(20px);
		border-radius: R(20);
		background: #fff url(../../../common/images/newIcon/com-bg2.png) no-repeat;
		background-size: 100% auto;
	}

	.terminal-info-content {
		background-color: #ffffff;
		margin: R(20px);
		border-radius: R(20px);
	}

	.summary-box {
		.tab-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 70%;
			margin: R(30px) auto;
			border: 1px solid $themeColor;
			border-radius: R(5px);
			padding: R(5px);

			&-item {
				// padding: R(10px) R(30px);
				padding: R(10px) 0;
				width: 50%;
				text-align: center;
				border-radius: R(5px);
			}

			.tab-active {
				background-color: $themeColor;
				color: #ffffff;

			}
		}

		.content-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: R(10px) R(30px);

			&-item {
				width: 48%;
				text-align: center;
				background-color: #ffffff;
				padding: R(30px);
				margin-top: R(20px);
				border-radius: R(10px);

				.top {
					font-size: R(30px);
					color: $themeColor;
				}

				.bottom {
					font-size: R(22px);
					color: #c3c3c3;
				}
			}
		}
	}
</style>
<template>
	<div class="container">
		<view class="summary-box">
			<view class="tab-box">
				<view :class="['tab-box-item',{'tab-active':tabCurrent==index}]" v-for="(item,index) in tabList"
					:key="index" @click="tabHandle(item,index)">
					{{item.name}}
				</view>
			</view>
			<view class="content-box">
				<view class="content-box-item">
					<view class="top">{{toFixedNum(totalData.totalAmount)}}</view>
					<view class="bottom">交易总金额(元)</view>
				</view>
				<view class="content-box-item">
					<view class="top">{{totalData.totalNum}}</view>
					<view class="bottom">交易总笔数</view>
				</view>
				<view class="content-box-item">
					<view class="top">{{toFixedNum(totalData.posAmount)}}</view>
					<view class="bottom">刷卡交易金额(元)</view>
				</view>
				<view class="content-box-item">
					<view class="top">{{totalData.posNum}}</view>
					<view class="bottom">刷卡交易笔数</view>
				</view>
				<view class="content-box-item">
					<view class="top">{{toFixedNum(totalData.qrAmount)}}</view>
					<view class="bottom">扫码交易金额(元)</view>
				</view>
				<view class="content-box-item">
					<view class="top">{{totalData.qrNum}}</view>
					<view class="bottom">扫码交易笔数</view>
				</view>
				<view class="content-box-item">
					<view class="top">{{toFixedNum(totalData.ysfAmount)}}</view>
					<view class="bottom">云闪付交易金额(元)</view>
				</view>
				<view class="content-box-item">
					<view class="top">{{totalData.ysfNum}}</view>
					<view class="bottom">云闪付交易笔数</view>
				</view>
			</view>
		</view>
		<div class="terminal-info-content" v-if="customData.agentName">
			<u-cell-item :arrow="false" hover-class="none" title="商户编号：" :value="customData.merchNo"><i
					slot="right-icon" class="iconfont icon-niantie" @click="copy(customData.merchNo)"></i></u-cell-item>
			<u-cell-item :arrow="false" hover-class="none" title="商户名称：" :value="customData.merchName" />
			<u-cell-item :arrow="false" hover-class="none" title="代理商编号：" :value="customData.agentNo"></u-cell-item>
			<u-cell-item :arrow="false" hover-class="none" title="代理商名称：" :value="customData.agentName" />

			<u-cell-item :arrow="false" hover-class="none" title="政策：" :value="customData.policyName" />
			<!-- <u-cell-item :arrow="false" hover-class="none" title="政策代码：" :value="customData.policyCode" /> -->

			<u-cell-item :arrow="false" v-if="customData.serialno" hover-class="none" title="机具sn号："
				:value="customData.serialno"><i slot="right-icon" class="iconfont icon-niantie"
					@click="copy(customData.serialno)"></i></u-cell-item>

			<u-cell-item :arrow="false" hover-class="none" title="添加日期：" :value="customData.addDate"
				class="agent-info-list-cell" />

			<u-cell-item :arrow="false" hover-class="none" v-if="customData.bindTime" title="绑定日期："
				:value="customData.bindTime" class="agent-info-list-cell" />
			<u-cell-item :arrow="false" hover-class="none" v-if="customData.activeDate" title="激活日期："
				:value="customData.activeDate" class="agent-info-list-cell" />
			<u-cell-item :arrow="false" hover-class="none" v-if="customData.standardDate" title="达标日期："
				:value="customData.standardDate" class="agent-info-list-cell" />
		</div>

	</div>
</template>

<script>
	import {
		getById
	} from "_a/terminal";
	import {
		getTotal
	} from "_a/merch";

	export default {
		name: "Info",
		data() {
			return {
				customData: {},
				tabList: [{
						name: '本月交易量',
						value: 1
					},
					{
						name: '累计交易量',
						value: 2
					},
				],
				tabCurrent: 0,
				monthType: 1, //1:本月交易量 2:所有交易量
				totalData: {
					value: 122
				},
			};
		},
		created() {
			this.customData = this.$storage.getStore("merchDetailInfo") || {};
			// console.log(this.customData);
			this.getTotalData();
		},
		methods: {
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						this.$tip.toast("复制成功!");
					},
				});
			},
			initInfo() {
				getById(this.customData.id).then((res) => {
					if (res.code === 200) {
						this.customData = res.data;
					}
				});
			},
			getTotalData() {
				const params = {
					merchno: this.customData.merchNo,
					monthType: this.monthType,
				}
				getTotal(params).then(res => {
					this.totalData = res.data;
					const obj = {
						'totalAmount': '交易总金额(元)',
						'totalNum': '交易总笔数',
						'posAmount': '刷卡交易金额(元)',
						'posNum': '刷卡交易笔数',
						'qrAmount': '扫码交易金额(元)',
						'qrNum': '扫码交易笔数',
						'ysfAmount': '云闪付交易金额(元)',
						'ysfNum': '云闪付交易笔数',
					}
				})
			},
			tabHandle(item, index) {
				this.tabCurrent = index;
				this.monthType = item.value;
				this.getTotalData();
			}
		},
	};
</script>